<!-- 方法1: 创建一个专门的会议室显示组件 -->
<!-- MeetingRoomLabel.vue -->
<template>
  <span v-if="loading">加载中...</span>
  <span v-else-if="roomName">{{ roomName }}</span>
  <span v-else>-</span>
</template>

<script setup lang="ts">
import { MeetingRoomApi } from '@/api/oa/meetingroom'

interface Props {
  roomId?: number
}

const props = defineProps<Props>()

const loading = ref(false)
const roomName = ref<string>('')

const fetchRoomName = async () => {
  if (!props.roomId) return

  loading.value = true
  try {
    const data = await MeetingRoomApi.getMeetingRoom(props.roomId)
    roomName.value = data.meetingName || ''
  } catch (error) {
    console.error('获取会议室信息失败:', error)
  } finally {
    loading.value = false
  }
}

watch(() => props.roomId, fetchRoomName, { immediate: true })
</script>
